spb/clip-spboucher-ai

1import type { Metadata } from "next";2import Link from "next/link";3import { catalogStats } from "@/lib/films";4import { dict, href, type Locale } from "@/lib/i18n";56export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {7  const locale = (await params).locale as Locale;8  const t = dict(locale);9  return { title: t.about.title, description: t.about.lead, alternates: { canonical: href(locale, "/about"), languages: { en: "/about", fr: "/fr/about" } } };10}1112export default async function About({ params }: { params: Promise<{ locale: string }> }) {13  const locale = (await params).locale as Locale;14  const t = dict(locale);15  const stats = await catalogStats();16  return (17    <div className="py-10">18      <p className="kicker">{t.home.process}</p>19      <h1 className="display mt-4 max-w-[14ch] text-[clamp(3rem,8vw,6rem)]">{t.about.title}</h1>20      <p className="prose-film mt-5 text-xl">{t.about.lead}</p>21      <ol className="mt-12 grid gap-px overflow-hidden rounded-[14px] border border-[var(--color-line-soft)] bg-[var(--color-line-soft)] sm:grid-cols-2 lg:grid-cols-4">22        {t.about.steps.map(([title, body], i) => (23          <li key={title} className="bg-[var(--color-stage)] p-6">24            <p className="display text-4xl tabular-nums text-[var(--color-accent)]">{String(i + 1).padStart(2, "0")}</p>25            <h2 className="display mt-4 text-2xl">{title}</h2>26            <p className="mt-2 text-sm leading-relaxed text-[var(--color-muted)]">{body}</p>27          </li>28        ))}29      </ol>30      <p className="mt-6 text-sm text-[var(--color-faint)]">{stats.films} {t.home.stats.films} · {stats.shots} {t.home.stats.shots}</p>31      <div className="mt-14 grid gap-10 md:grid-cols-3">32        {([[t.about.disclosureTitle, t.about.disclosure], [t.about.privacyTitle, t.about.privacy], [t.about.reportTitle, t.about.report]] as const).map(([title, body], i) => (33          <section key={title}><h2 className="display text-3xl">{title}</h2><p className="mt-3 text-sm leading-relaxed text-[var(--color-muted)]">{body}</p>{i === 2 && <Link href={href(locale, "/report")} className="btn btn-ghost btn-sm mt-4">{t.about.reportLink}</Link>}</section>34        ))}35      </div>36    </div>37  );38}39